@import './../variables';

#current-month {
    color: var(--v-text-lighten2);
    font-size: 20px;
}

.calendar-title-button {
}

.calendar-goal-button {
    cursor: pointer;
}

.v-menu__content.date-picker-dialog {
    width: 290px !important;
    min-width: 290px !important;
}

.calendar-popup-menu {
    background-color: var(--v-foreground-base);
    width: 240px;
    border: 1px solid rgba(0, 0, 0, .2);

    #calendar-popup-date {
        background-color: var(--v-primary-base);
        color: white;
        display: flex;
        justify-content: flex-start;
        font-size: 18px;

        #calendar-popup-date-text {
            margin-top: 6px;
        }
    }

    .calendar-popup-input {
        width: 120px;
        min-width: 120px;
    }

    #calendar-popup-achievements {
        td {
            padding: 0px;
            font-size: 14px;
            height: 22px;
            text-align: center;
            
            &:nth-child(1) {
                text-align: left;
                text-transform: capitalize;
            }
        }
    }
}

#goal-selection-text-small {
    display: none;
}

#calendar-date-button {
    width: 170px;
}

#calendar {
    position: relative;
    background-color: var(--v-foreground-base);
    height: 200px;    
    
    #calendar-months {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        justify-content: space-around;
        align-content: flex-start;
        overflow: hidden;
        width: 100%;
        height: 166px;

        .calendar-month {
            display: block;
            width: 200px;
            height: 166px;
            margin-bottom: 20px;

            .calendar-month-title {
                font-size: 14px;
                font-weight: bold;
                color: var(--v-text-base);
                display: block;
                width: 100%;
                height: 28px;
                padding-left: 8px;
            }

            .calendar-month-days {
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-content: flex-start;
                width: 100%;
                height: calc(100% - 20px);

                .calendar-day {
                    position: relative;
                    box-sizing: border-box;
                    width: 24px;
                    height: 24px;
                    line-height: 22px;
                    margin: 2px;
                    background-color: rgba(0, 0, 0, 0.03);
                    border: 1px solid rgba(0, 0, 0, 0.03);
                    border-radius: 6px;
                    font-size: 9px;
                    text-align: center;
                    user-select: none;
                    color: var(--v-text-base);
                    transition: .25s;
                    overflow: hidden;
                    cursor: pointer;
                    z-index: 1;
                    
                    &:hover {
                        background-color: rgba(0, 0, 0, 0.12);
                        border: 1px solid rgba(0, 0, 0, 0.12);
                        
                        .calendar-day-background {
                            filter: brightness(96%);
                        }
                    }

                    .calendar-day-background {
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        width: 250%;
                        height: 250%;
                        z-index: 2;
                        transition: .3s;
                        background-color: var(--v-primary-base);
                    }
                    
                    &.no-achievement .calendar-day-background {
                        background-color: rgba(0, 0, 0, 0) !important;
                        transform-origin: center;
                        transform: translate(0, 0) rotate(0) translate(0, 0);
                    }

                    &.half-achievement .calendar-day-background {
                        transform-origin: center;
                        transform: translate(-6px, -6px) rotate(45deg) translate(-12px, 36px);
                    }

                    .calendar-day-text {
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        width: 100%;
                        height: 100%;
                        z-index: 3;
                        background-color: rgba(0, 0, 0, 0);
                        color: white;
                    }
                    
                    &.no-achievement .calendar-day-text,
                    &.half-achievement .calendar-day-text {
                        color: var(--v-text-base);
                    }
                }
            }
        }
    }
}

#goals {
    display: flex;
    flex-wrap: wrap;

    .goal {
        width: 292px;
        height: 380px;

        .v-progress-circular__info {
            font-size: 22px;
            color: var(--v-text-base);
        }
    }
}

#statistics {
    display: flex;
    flex-wrap: wrap;

    .statistic {
        display: flex;
        width: 290px;
        height: 100px;

        .statistic-icon {
            width: 86px;
            i {
                font-size: 42px;
            }
        }

        .statistic-data {
            width: calc(100% - 86px);

            .statistic-value {
                width: 100%;
                height: 34px;
                line-height: 30px;
                font-size: 28px;
                text-align: right;
            }

            .statistic-name {
                width: 100%;
                height: 22px;
                font-size: 14px;
                text-align: right;
            }
        }
    }
}

@media (max-width: 767px) {
    #goals {
        .goal {
            width: 246px;
            height: 400px;
            
            &:nth-child(even) {
                margin-right: 0px !important;
            }

            .v-progress-circular__info {
                font-size: 20px;
            }
        }
    }

    #statistics {
        .statistic {
            width: 246px;

            &:nth-child(even) {
                margin-right: 0px !important;
            }

            .statistic-data {
                .statistic-value {
                    font-size: 26px;
                }

                .statistic-name {
                    font-size: 14px;
                }
            }
        }
    }
}

@media (max-width: 575px) {
    #about {
        justify-content: center;
        
        .v-card {
            width: 360px !important;
            margin-right: 0px !important;
        }
    }

    .subheader.subheader-home {
        max-width: 358px;
        margin-left: auto;
        margin-right: auto;
    }

    #calendar {
        max-width: 360px;
        height: 255px;
        margin-left: auto;
        margin-right: auto;
        
        #calendar-months {
            width: 100%;
            height: 224px;

            .calendar-month {
                width: 268px;
                height: 210px;
                margin-bottom: 10px;

                .calendar-month-title {
                    font-size: 16px;
                    height: 32px;
                }

                .calendar-month-days {
                    .calendar-day {
                        width: 34px;
                        height: 34px;
                        line-height: 34px;
                        margin: 2px;
                        font-size: 10px;
                        
                        &.half-achievement .calendar-day-background {
                            transform-origin: center;
                            transform: translate(-6px, -6px) rotate(45deg) translate(-8px, 40px);
                        }
                    }
                }
            }
        }
    }    

    #calendar-date-button {
        width: unset;

        #calendar-date-button-text {
            display: none;
        }
    }

    #goals {
        justify-content: center;

        .goal {
            width: 360px;
            max-width: 360px;
            height: 410px;
            margin-left: 8px !important;
            margin-right: 8px !important;

            .v-progress-circular__info {
                font-size: 20px;
            }

            &:nth-child(even) {
                margin-right: 8px !important;
            }
        }
    }

    #statistics {
        justify-content: center;

        .statistic {
            width: 360px;
            max-width: 360px;
            margin-left: 8px !important;
            margin-right: 8px !important;

            .statistic-data {
                .statistic-value {
                    font-size: 26px;
                }

                .statistic-name {
                    font-size: 14px;
                }
            }

            &:nth-child(even) {
                margin-right: 8px !important;
            }
        }
    }
}

@media (max-width: 451px) {
    #calendar {
        margin-left: 8px;
        margin-right: 8px;
    }
}

@media (max-width: 400px) {
    #goal-selection-text {
        display: none;
    }

    #goal-selection-text-small {
        display: block;
    }
}

@media (max-width: 355px) {
    #calendar {
        max-width: 360px;
        height: 230px;
        
        #calendar-months {
            width: 100%;
            height: 204px;

            .calendar-month {
                width: 232px;
                height: 190px;

                .calendar-month-days {
                    .calendar-day {
                        width: 29px;
                        height: 29px;
                        line-height: 29px;
                        margin: 2px;

                        &.half-achievement .calendar-day-background {
                            transform-origin: center;
                            transform: translate(-6px, -6px) rotate(45deg) translate(-8px, 34px);
                        }
                    }
                }
            }
        }
    }    

    #calendar-date-button {
        width: unset;

        #calendar-date-button-text {
            display: none;
        }
    }

    #goals {
        justify-content: center;

        .goal {
            width: 360px;
            max-width: 360px;
            height: 410px;
            margin-left: 8px !important;
            margin-right: 8px !important;

            .v-progress-circular__info {
                font-size: 20px;
            }

            &:nth-child(even) {
                margin-right: 8px !important;
            }
        }
    }

    #statistics {
        justify-content: center;

        .statistic {
            width: 360px;
            max-width: 360px;
            margin-left: 8px !important;
            margin-right: 8px !important;

            .statistic-data {
                .statistic-value {
                    font-size: 26px;
                }

                .statistic-name {
                    font-size: 14px;
                }
            }

            &:nth-child(even) {
                margin-right: 8px !important;
            }
        }
    }
}

#app main.eink #calendar {
    #calendar-months .calendar-month .calendar-month-days .calendar-day {
        &.half-achievement .calendar-day-background {
            transform: translate(-12px, -12px) rotate(45deg) translate(0, 34px);
        }

        .calendar-day-text {
            color: black;
        }

        &.full-achievement .calendar-day-text {
            color: white;
        }
    }
}

@media (max-width: 575px) {
    #app main.eink #calendar {
        #calendar-months .calendar-month .calendar-month-days .calendar-day {
            &.half-achievement .calendar-day-background {
                transform: translate(-12px, -12px) rotate(45deg) translate(0, 50px);
            }
        }
    }
}

@media (max-width: 355px) {
    #app main.eink #calendar {
        #calendar-months .calendar-month .calendar-month-days .calendar-day {
            &.half-achievement .calendar-day-background {
                transform: translate(-12px, -12px) rotate(45deg) translate(0, 42px);
            }
        }
    }
}